<template>
  <div>
    <CommonHead title="购物车"/>
    <div class="cart-main">
      <!-- 渲染商品 -->
      <van-button v-if="!checkLogin()" size="large" type="info">我登录后就不显示了</van-button>
      <van-swipe-cell
      v-for="(item,index) in cart.lists"
          :key="item.id"
      >
        <div class="item">
          <van-checkbox v-model="item.isChecked" @click="checkChange"></van-checkbox>
            <van-card
            :num="item.num"
            :price="item.minPrice"
            :title="item.name"
            :thumb="item.pic"
          >
            <template #footer>
              <van-button size="small" @click="add_num(index)" plain type="default">+</van-button>
              <span>{{ item.num }}</span>
              <van-button size="small" @click="reduce_num(index)"  plain type="default">-</van-button>
            </template>
        </van-card>
        </div>
        <template #right>
          <van-button square text="删除" type="danger" @click="del_item(index)" class="delete-button" />
        </template>
      </van-swipe-cell>
    </div>
    <!-- 提交订单栏 -->
    <div class="submit">
      <van-submit-bar :price="cart.total*100" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="cart.isAllChecked" @click="allChecked">全选</van-checkbox>
      </van-submit-bar>
    </div>
     <!-- 提交订单栏 -->
    <Tabbar/>
  </div>
</template>

<script>
import { Dialog, Toast } from 'vant'
import CommonHead from '@components/CommonHead'
import Tabbar from '@components/Tabbar'
import { mapState, mapActions, mapMutations } from 'vuex'
import { checkLogin } from '@/utils'
export default {
  data () {
    return {
    }
  },
  created () {
    // 页面初始化计算总价格
    this.calc_total()
  },
  methods: {
    checkLogin,
    del_item (index) {
      // 删除商品
      Dialog.confirm({
        message: '您确认要删除吗'
      }).then(() => {
        this.delItem(index)
        this.calc_total()
      }).catch(() => {
        Toast('取消删除')
      })
    },
    allChecked () {
      // 点击全选按钮 设置单选按钮状态
      this.setSingleCheck(this.cart.isAllChecked)
      this.setAllChecked(this.cart.isAllChecked)
      this.calc_total()
    },
    checkChange () {
      this.setCart(this.cart)
      // 单个商品 选择
      // 判断商品是否全部选中 处理全选按钮选中
      const { lists } = this.cart
      const isAllChecked = lists.every(item => item.isChecked)
      // 改变全选
      this.setAllChecked(isAllChecked)
      this.calc_total()
    },
    add_num (index) {
      // 增加商品数量
      this.addNum(index)
      this.calc_total()
    },
    reduce_num (index) {
      // 减少商品数量
      this.reduceNum(index)
      this.calc_total()
    },
    onSubmit () {
      // 判断是否登录 如果登录了 则 可以提交 否则不可以
      if (this.checkLogin()) {
        // 得到 选中的商品
        const checkedItems = this.cart.lists.filter(item => item.isChecked)
        this.createOrder(checkedItems)
        this.$router.push('/order')
      } else {
        this.$router.push({ path: '/login', query: { path: '/cart' } })
      }
    },
    ...mapActions(['calc_total']),
    ...mapMutations(['addNum', 'reduceNum', 'setCart', 'setAllChecked', 'setSingleCheck', 'delItem', 'createOrder'])
  },
  computed: {
    ...mapState(['cart'])
  },
  components: {
    CommonHead,
    Tabbar
  }
}
</script>

<style lang="scss" scoped>
.cart-main{
  margin-top:46px;
}
.van-card__content{
  justify-content: space-around;
}
.item{
  display: flex;
  .van-checkbox{
    margin:0 5px;
  }
  .van-card{
    flex:1;
  }
}

/deep/ .van-swipe-cell__wrapper .van-swipe-cell__right{
  display: flex;
  align-items: center;
  button{
    height:100%;
  }
}

</style>
